<template>
	<view class="page-cont">

    <view v-if="progress <= CONFIRMATION_INFO" class="home-page-container uni-flex uni-column" ref="homepage">
      <view v-if="progress === FILL_INFO" class="info-window uni-flex uni-column">
        <view class="uni-flex uni-row" style="flex: 3;">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="product-title">掌心密缘</text>
        </view>

        <view class="uni-flex uni-row" style="flex: 1;">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="product-tip">输入你的资料，查看你的缘分</text>
        </view>

        <view class="uni-flex uni-row form-item-container" style="flex: 3;">
          <view class="uni-flex uni-row form-item-title" style="flex: 2;">
            <text class="form-item-text">你的性别</text>
          </view>

<!--          <view class="uni-flex uni-row " style="flex: 3;">-->
<!--            <text class="" style="color: whitesmoke">你的性别</text>-->
<!--          </view>-->

          <view class="uni-flex" style="flex: 3;">
            <view class="gender-radio-male" @click="set_gender('男')">
              <image  v-if="user_info.gender==='男'" class=" radio-option-button" src="@/static/util/radio_selected.svg" style="margin-top: 0rpx"></image>

              <image  v-else class=" radio-option-button" src="@/static/util/radio_unselected.svg" style="margin-top: 0rpx"></image>

              <text class="form-item-text" style="margin-top: 0rpx; margin-left: 0rpx">男</text>

            </view>

            <view class="gender-radio-female" @click="set_gender('女')">
              <image v-if="user_info.gender==='女'" class=" radio-option-button" src="@/static/util/radio_selected.svg"></image>
              <image  v-else class=" radio-option-button" src="@/static/util/radio_unselected.svg" style="margin-top: 0rpx"></image>


              <text class="form-item-text" style="margin-top: -300rpx">女</text>
            </view>


          </view>

<!--          <view class="uni-px-5 uni-pb-5" style="flex: 3;">-->
<!--&lt;!&ndash;            <view class="text">单选选中：{{JSON.stringify(radio1)}}</view>&ndash;&gt;-->
<!--            <uni-data-checkbox v-model="radio1" :localdata="sex" selected-color="#F5DEAD" selected-text-color="#F5DEAD"></uni-data-checkbox>-->
<!--          </view>-->

        </view>

        <view class="uni-flex uni-row form-item-container" style="flex: 3; z-index: 100">
          <view class="uni-flex uni-row form-item-title" style="flex: 2;">
            <text class="form-item-text">你的生日</text>
          </view>

          <view @click="hideBtn()" class="uni-flex uni-row " style="flex: 3; ">
            <uni-datetime-picker   @change="showBtn"  type="date" v-model="user_info.birthday">
            	
            	<view>
            		<text class="form-item-text">
            			{{user_info.birthday}}
            		</text>
            		 <image class="form-item-icon" src="@/static/homepage/pull_button.svg"></image>
            	</view>
				
            	
            	<!-- <image src="../../../static/stop.png"></image> -->
            </uni-datetime-picker>
          </view>

        </view>
		

        <view class="uni-flex uni-row form-item-container" style="
        flex: 3;
        z-index: 10;
        /*height: 20px;*/
">
          <view class="uni-flex uni-row form-item-title" style="flex: 2; margin-top: 0rpx">
            <text class="form-item-text">你的掌纹</text>
          </view>

<!--          <view class="uni-flex uni-row " style="flex: 3;">-->
<!--            <text class="" style="color: whitesmoke">你的性别</text>-->
<!--          </view>-->
          <view class="example-body custom-image-box" style="flex: 1;">
<!--            <text class="text">选择头像</text>-->
            <uni-file-picker limit="1" :del-icon="false" disable-preview
                             @select="select"
                             :imageStyles="imageStyles"
                             file-mediatype="image">
              <image src="@/static/brown.svg"></image>
<!--              <image class="form-item-icon" src="@/static/homepage/plus.svg"></image>-->

            </uni-file-picker>

            <image class="form-item-icon" src="@/static/homepage/plus.svg" style="margin-right: 7rpx"></image>

          </view>

        </view>

        <view class="product-tip" style="margin-bottom: 40rpx">
          <text v-if="user_info.gender==='男'">*注：男生请上传左手掌纹</text>
          <text v-else>*注：女生请上传右手掌纹</text>
        </view>

        <view v-show="is_show0" @click="submitInfo()" class="uni-flex main-button-container" style="z-index: 10">
			<image  src="@/static/main_button.svg" style="
			filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
			height: 180rpx;
			"></image>
          <text class="main-button-text">立即查看</text>
          <!-- <button>
            <image src="@/static/main_button.svg" style="
filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
"></image>
          </button> -->
        </view>

        <view class="uni-flex" style="flex: 3" @click="change_privacy_agreement()">
          <image  v-if="privacy_agreement===1" class=" radio-option-button" src="@/static/util/radio_selected.svg" ></image>
          <image  v-else class=" radio-option-button" src="@/static/util/radio_unselected.svg" ></image>

          <text class="product-tip">同意用户协议和隐私协议</text>
        </view>

        <view class="uni-flex" style="flex: 1 ;margin-top: 0rpx;margin-bottom: 20rpx">
          <text class="plain-text">内容纯属娱乐，暂不向未满18岁青少年提供服务。
            本网页数据安全由阿里云提供，
            严格按照法律法规和用户协议对您的信息进行全方位保护，
            请放心使用</text>
        </view>




      </view>

      <view style="height: 100rpx">

      </view>

      <view v-if="progress === CONFIRMATION_INFO" class="confirmation-window uni-flex uni-column">

        <view class="close-btn-container">
          <image @click="fillInfo()" src="@/static/util/close_btn.svg"></image>
        </view>

        <view class="uni-flex uni-row" style="flex: 3;">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="product-title">确认信息</text>
        </view>

        <view class="uni-flex uni-row" style="flex: 1; margin-top: 50rpx">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="form-item-text">基本信息</text>
        </view>

        <view class="uni-flex uni-row form-item-container " style="flex: 3;-webkit-justify-content: center;">
          <view class="uni-flex uni-row " style="">
            <text class="form-item-text" style="text-align: center">性别 : {{user_info.gender}} ｜生日：{{user_info.birthday}}</text>
          </view>

          <view style="height: 100rpx"></view>

<!--          <view class="uni-flex uni-row " style="flex: 3;">-->
<!--            <text class="" style="color: whitesmoke">{{user_info.gender}}</text>-->
<!--          </view>-->

        </view>


        <view class="uni-flex uni-row" style="flex: 1;margin-top: 50rpx;margin-bottom: 30rpx;">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="form-item-text">你的掌纹</text>
        </view>


<!--        <view class="showed-image-container">-->
<!--          <image :src="tmp_img" ></image>-->
<!--&lt;!&ndash;          :mode="imgDisplayMode"&ndash;&gt;-->
<!--        </view>-->

        <view class="image-container" :style="{backgroundImage: 'url('+ tmp_img +')'}"></view>

        <view class="product-tip" style="margin-bottom: 40rpx">
          <text v-if="user_info.gender==='男'">*注：男生请确认您上传的为左手掌纹</text>
          <text v-else>*注：女生请确认您上传的为右手掌纹</text>
        </view>

        <view @click="confirmInfo()" class="uni-flex main-button-container" style="">
          <image  src="@/static/main_button.svg" style="
			filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
			height: 180rpx;
			"></image>
          <text class="main-button-text">我已确认</text>
          <!-- <button>
            <image src="@/static/main_button.svg" style="
filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
"></image>
          </button> -->
        </view>


        <view style="height: 300rpx">
        </view>



      </view>

    </view>

    <view v-if="progress >= PAY_FINAL0 && progress <= COLLECT_INFO" class="result-page-container uni-flex uni-column">

      <view v-if="progress === PAY_FINAL0" class="pay-final0-page">
        <view v-if="progress >= PAY_FINAL0" class="content-window uni-flex uni-column">
          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主情感上是一个什么样的人</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text blur-text">{{example}}</text>
            </view>

            <view style="height: 200rpx"></view>

          </view>


          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主的感情运如何</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text blur-text">{{example2}}</text>
            </view>
            <view style="height: 200rpx"></view>
          </view>



          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主什么时候结婚</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text blur-text" style="font-size: 50rpx;line-height: 70rpx">{{example_short}}</text>
            </view>

            <view style="height: 200rpx"></view>

          </view>


          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主最近十年的桃花如何</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text blur-text">{{example}}</text>
            </view>

            <view style="height: 200rpx"></view>

          </view>


          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主喜欢什么类型的对象</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text blur-text">{{example}}</text>
            </view>

            <view style="height: 200rpx"></view>

          </view>






          <view style="height: 150rpx"></view>

        </view>




        <view class="bottom-window uni-flex uni-column" style="width: 100%">
          <view class="uni-flex uni-column">
            <view class="uni-row uni-flex" style="text-align: center;align-content: center;-webkit-justify-content: center;">
<!--计时器，发现UVUI的计时器组件可以自定义样式（通过绑定回调来做到）-->

              <uv-count-down
                  :time="5 * 60 * 1000"
                  format="DD:HH:mm:ss"
                  autoStart
                  millisecond
                  @change="onChange">

                <view class="uni-row uni-flex" style="text-align: center;align-content: center;-webkit-justify-content: center;">


                <view class="time_item_container" style="">
                <view class="time_item">
                  <text class="time_item_text">0</text>
                </view>
              </view>

              <view class="time_item_container" style="">
                <view class="time_item">
                  <text class="time_item_text">{{ timeData.minutes }}</text>
                </view>
              </view>
              <text class="time_item_text">:</text>

              <view class="time_item_container" style="">
                <view class="time_item">
                  <text class="time_item_text">{{ Math.floor(timeData.seconds/10) }}</text>
                </view>
              </view>

              <view class="time_item_container" style="">
                <view class="time_item">
                  <text class="time_item_text">{{ timeData.seconds%10 }}</text>
                </view>
              </view>
              <text class="time_item_text">:</text>

              <view class="time_item_container" style="">
                <view class="time_item">
                  <text class="time_item_text">{{ Math.floor(timeData.milliseconds/100) }}</text>
                </view>
              </view>
              <view class="time_item_container" style="">
                <view class="time_item">
                  <text class="time_item_text">{{ Math.floor(timeData.milliseconds/10)%10 }}</text>
                </view>
              </view>
                </view>
              </uv-count-down>
            </view>

            <view style="text-align: center">
              <text class="normal-text" style="text-align: center">限  时  优  惠  结  束</text>
            </view>
          </view>

          <view class="uni-flex uni-row" style="">

            <view class="uni-flex uni-row" style="flex: 1">


                <view class="uni-flex uni-column" style="flex: 1">
                  <view class="uni-flex" style="flex: 1;margin-top: 35rpx">
                    <text class="normal-text">红包优惠20元</text>
                  </view>

                  <view class="uni-flex " style="flex: 1;-webkit-justify-content: center;margin-top: -65rpx">
                    <text class="red-box">结缘价</text>

                  </view>
                </view>

                <view class="uni-flex" style="flex: 1">
                  <text class="price-text">9.9</text>

                </view>

              </view>


            <view style="flex: 1">
              <view @click="pay()" class="uni-flex main-button-container" style="">
                <image  src="@/static/main_button.svg" style="
			filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
			height: 180rpx;
			width: 400rpx;
			object-fit: fill;
			"></image>
                <text class="main-button-text">微信支付</text>
                <!-- <button>
                  <image src="@/static/main_button.svg" style="
      filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
      "></image>
                </button> -->
              </view>
            </view>

          </view>
        </view>

      </view>






      <view v-if="progress === SHOW_RESULT" class="show-result-page">
        <view v-if="progress >= PAY_FINAL0" class="content-window uni-flex uni-column">
          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主情感上是一个什么样的人</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text">{{answer1}}</text>
            </view>

            <view style="height: 200rpx"></view>

          </view>


          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主的感情运如何</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text">{{answer2}}</text>
            </view>
            <view style="height: 200rpx"></view>
          </view>


          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主什么时候结婚</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text">{{answer3}}</text>

<!--              <text class="result-text" style="font-size: 50rpx;line-height: 70rpx">{{answer3}}</text>-->
            </view>
            <view style="height: 200rpx"></view>
          </view>



          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主最近十年的桃花如何</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text">{{answer4}}</text>
            </view>
            <view style="height: 200rpx"></view>
          </view>



          <view class="uni-flex uni-row" style="">
            <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
            <text class="question-title">命主喜欢什么类型的对象</text>
          </view>


          <view class="uni-flex uni-row result-item-container" style="">
            <view class="uni-flex uni-row " style="flex: 2;">
              <text class="result-text">{{answer5}}</text>
            </view>
            <view style="height: 200rpx"></view>
          </view>

          <view style="height: 250rpx"></view>

        </view>


        <view class="bottom-window uni-flex uni-column" style="width: 100%">


          <view @click="change_progress(COLLECT_INFO)" class="uni-flex main-button-container" style="">
            <image  src="@/static/main_button.svg" style="
			filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
			height: 180rpx;

			object-fit: fill;
			"></image>
            <text class="main-button-text">发送结果到手机/邮箱</text>
            <!-- <button>
              <image src="@/static/main_button.svg" style="
  filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
  "></image>
            </button> -->
          </view>
        </view>


      </view>






      <view v-if="progress === COLLECT_INFO" style="height: 100rpx"></view>
      <view v-if="progress === COLLECT_INFO" class="confirmation-window uni-flex uni-column">



        <view class="close-btn-container">
          <image @click="change_progress(SHOW_RESULT)" src="@/static/util/close_btn.svg"></image>
        </view>

        <view class="uni-flex uni-row" style="flex: 3;">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="product-title">发送信息</text>
        </view>

        <view class="uni-flex uni-row" style="flex: 1; margin-top: 50rpx;width: 80%">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="form-item-text" style="text-align: left;align-content: flex-start">手机号</text>
        </view>

        <view class="uni-flex uni-row form-item-container " style="flex: 3;-webkit-justify-content: center;">
          <view class="uni-flex uni-row " style="">
            <input v-model="user_info.phone" focus class="uni-input form-item-text"  placeholder="" style="background-color: transparent; text-align: left"/>
          </view>

          <view style="height: 100rpx"></view>

          <!--          <view class="uni-flex uni-row " style="flex: 3;">-->
          <!--            <text class="" style="color: whitesmoke">{{user_info.gender}}</text>-->
          <!--          </view>-->

        </view>

        <view class="uni-flex uni-row" style="flex: 1; margin-top: 50rpx;width: 80%">
          <!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
          <text class="form-item-text">邮箱</text>
        </view>

        <view class="uni-flex uni-row form-item-container " style="flex: 3;-webkit-justify-content: center;">
          <view class="uni-flex uni-row " style="">
<!--            输入框-->
            <input v-model="user_info.email" class="uni-input form-item-text"  placeholder="" style="background-color: transparent; text-align: left"/>
          </view>


          <view style="height: 100rpx"></view>

        </view>



        <view style="height: 260rpx"></view>


        <view class="" style="margin-bottom: 40rpx;color: white">
          <text>*注：输入任意一个正确的联系方式即可发送成功</text>
        </view>

        <view @click="send_result()" class="uni-flex main-button-container" style="">
          <image  src="@/static/main_button.svg" style="
			filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
			height: 180rpx;
			"></image>
          <text class="main-button-text">确认发送</text>
          <!-- <button>
            <image src="@/static/main_button.svg" style="
filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
"></image>
          </button> -->
        </view>


        <view style="height: 300rpx">
        </view>



      </view>



    </view>





<!--    加载页面-->
    <view v-if="progress === LOADING" class="loading-page-container uni-flex uni-column">

<!--      <view style="height: 2000px"></view>-->

      <view class="bottom-content uni-flex uni-column" style="width: 100%; text-align: center">


        <view  @click="startLoadingAnim()" class="uni-flex main-button-container" style="">
          <image  src="@/static/main_button.svg" style="
			filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
			height: 180rpx;

			object-fit: fill;
			"></image>
          <text class="main-button-text">{{loading_tip}}</text>
          <!-- <button>
            <image src="@/static/main_button.svg" style="
filter: drop-shadow(0px 4px 7px rgba(0, 0, 0, 0.25));
"></image>
          </button> -->
        </view>


        <view class="" style="width: 100%; text-align: center;
position: fixed; bottom: 5%;
">
          <text class="plain-text-regular" >
            多模态大模型正在分析，请稍等
            预计等待时间30秒
          </text>

        </view>
      </view>



    </view>












    <!-- <image :src="this.tmp_img" mode="widthFix" style="width: 100%;" ></image> -->
		<!-- <button @click="stream()">流式</button>
		<view class="container"  >
		
		
		<h-title title="画面分析结果(请截图保存,退出后将看不到此次结果)" color="#63065f" more-show="false"></h-title>
		    <zero-markdown-view :themeColor="'#63065f'" :markdown="overallResult"></zero-markdown-view>
		</view> -->
		
		<!-- <button @click="select_pic()" ref="test2">选图片</button>
		<button @click="test()" ref="test">test</button> -->
		<view v-if="status < RES_SHOWED-10" class="container">
			<!-- <uni-card :is-shadow="false" is-full>
				<text class="uni-h6">文件选择上传组件</text>
			</uni-card> -->
			
			
			
			<!-- <h-title title="作画并上传图片(上传完图片后请下拉页面填写信息后点击提交按钮)" color="#63065f" more-show="false"></h-title>
			   <zero-markdown-view :themeColor="'#63065f'" :markdown="example"></zero-markdown-view>
			 -->
		
			<!-- 预览图像 -->
			<!-- <view class="preview-container">
				<image :src="this.tmp_img" mode="widthFix" style="width: 100%;"></image>
			</view> -->
			
			<view class="operation-container uni-flex uni-column ">
				<view class="uni-flex uni-row">
					
					<view class="uni-flex uni-column" style="flex: 2;">
					
						<view class="uni-flex uni-row" style="flex: 3;">
							<!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
							<text class="product-title">掌心密缘</text>
						</view>

						
						<view class="uni-flex uni-row" style="flex: 1;">
							<!-- <uni-title class="product-title" type="h1" title="掌心密缘"></uni-title> -->
							<text class="">输入你的资料，查看你的缘分</text>
						</view>
					</view>
					
					<view class="uni-flex uni-column" style="flex: 1;">
					</view>
				</view>
			<!-- <uni-section title= "请上传一张手相的照片" type="line"></uni-section> -->
				<view class="example-body">
					<uni-file-picker 
					ref="files"
					limit="1" 
					@select="select" 
					@progress="progress" 
					@success="success" 
					@fail="fail" 
					title="上传掌纹" :source-type="sourceType">
					<!-- <button>选择文件</button> -->
					<!-- <image :src="tmp_img"></image> -->
					</uni-file-picker>
				</view>
				
				<view class="example-body custom-image-box">
					<text class="text">选择头像</text>
					<uni-file-picker limit="1" :del-icon="false" disable-preview :imageStyles="imageStyles"
						file-mediatype="image">选择</uni-file-picker>
				</view>
				
				
				
				
				
				
			</view>
				
			
			
			
		
			<uni-section title="分析结果" type="line" >
				
			</uni-section>
			<view class="result">
				<text>{{result}}</text>
				<image v-if="failFlag === 1" src="../../static/adminQRcode.png"></image>
			</view>
			
			
		</view>
		
		
		<view v-if="status >= RES_SHOWED +100" id="result-area">
			<view class="container"  >
			
			
			<!-- <h-title title="角色卡" color="#63065f" more-show=false></h-title>
			
			        
			    <zero-markdown-view :themeColor="'#63065f'" :markdown="overallResult"></zero-markdown-view>
			</view>
			<view class="container"  > -->
			
			
			<h-title title="画面分析结果" color="#63065f" more-show=false></h-title>
				
			        <!-- 默认用法 直接传入md文本即可-->
			    <zero-markdown-view :themeColor="'#63065f'" :markdown="result"></zero-markdown-view>
			</view>
		</view>
		
		<!-- <view class="container" v-if="status >= RES_SHOWED" >
		
		
		<h-title title="保存结果(请在全部结果生成之后再次点击以下按钮)" color="#63065f" more-show=false></h-title>
			<sp-html2canvas-render
			  domId="result-area"
			  ref="renderRef"
			  @renderOver="renderOver"
			></sp-html2canvas-render>
		    
			<button @click="cusRenderDom" class="screen-shot-btn">
				<text class="info-text">
					导出截屏（生成截屏后请长按保存）
				</text>
			</button>
			
			<image v-if="screenShotUrl != ''" class="screen-shot-img" :src="screenShotUrl" @click="previewImg(screenShotUrl)" :mode="imgDisplayMode"></image>
				
				
				
		</view> -->
		
		
		<button v-if="status === IMG_UPLOADED -100" @click="analyse()" style="margin-top: 0rpx; " type = "primary">
			提交
		</button>
		
		<button v-if="testMode === 1" @click="appendResult('12')">
			测试
		</button>
		
		<!-- <view class="posters-container" v-if="status >= RES_SHOWED" >
			
			<h-title title="生成海报" color="#63065f" more-show=false></h-title>
			
			<text v-if="status === RES_SHOWED">
				请等待全部结果生成完成
			</text>
		
			<my-poster v-if="status >= RES_EXPORTING" :personAttribute = "getPersonAttribute()">
			</my-poster>
			
		</view>	 -->
			
	</view>

	
	
</template>

<script>
	import {server_url} from '@/web_config/config.js'
	import poster from '@/components/poster.vue'
  import {url} from "../../uni_modules/uv-ui-tools/libs/function/test";
	
	
	
	export default {
		// 组件选项
		  components: {
		    // 使用自定义标签名注册组件
		    'my-poster': poster
		  },
		
		data() {
			return {
				testMode: 0,
				status:0,
        timeData: {},
				value:['0'],
				// result:"结果会展示在这里(๑•̀ㅂ•́)و✧",
				imgDisplayMode:"aspectFit",
				overallResult:"请稍等～正在制作你的角色卡",
        dateString: this.getDate(new Date()),
        user_info:{
          birthday: "2000-07-01",
              // this.getDate(new Date()),
          gender:"女",
          phone:"",
          email:"",
          },
        privacy_agreement:1,
        radio1: 0,
    
        sex: [{
          text: '男',
          value: 0
        }, {
          text: '女',
          value: 1
        }, {
          text: '未知',
          value: 2
        }],
				example:`
				### part 1: 人物属性\n你是一位坚韧独立的内省者，经历过孤独与挑战，内心蕴藏不屈的生命力，正在人生的关键路口寻觅成长与突破。\n\n### part 2: 你的优势\n你拥有强大的内心世界，能够独立面对困境，并从中汲取力量继续前行。你对安全感的重视使你在不稳定环境中仍能保持内心的平和与稳定，擅长在逆境中为自己构建情感的避风港。你对细节的关注和深度的自我反思能力，让你在个人成长和职业发展上具备深刻的理解与洞察力，适合从事需要高度责任感、稳定性和深刻思考的职业，如心理咨询师、作家或战略规划师。\n\n### part 3: 小tips\n近期，你的情绪状态可能偏向单一和沉重，反映了一种内省但略显悲观的生活观。小贴士是，主动为生活注入新鲜元素，比如参与多彩的社交活动，探索新爱好，用创造性的方式表达自己，以此来平衡内心的沉闷，寻找更多正面情绪的出口。同时，考虑到内心的复杂性，不妨寻求专业的心理咨询支持，这将有助于你更深入地理解自己的情感，有效转化负面情绪，促进个人的全面成长与心灵的进一步绽放。
				`,
				example2:`
				从这张房树人测验的图片描述中，我们可以进行如下心理分析1.**光秃秃的大树**:通常代表个体的成长历程和自我形象。这棵树没有叶子，可能暗示着个体感到生命力的枯竭、缺乏活力或者处于一种消极的情绪状态。树枝向右弯曲成弧形，可能表示个体对外界的依赖或对他人影响的敏感性，也可能反映了内心的压抑或逃避倾向。2.**简陋破旧的房子**:房子通常代表个体的内心世界和安全感。破损的屋顶和裂缝的墙壁可能象征着个体心理防御机制的脆弱或存在严重的心理创伤。房子在画面的边缘，可能意味着个体感觉自己与外界隔离，或者在心理上与外部世界保持距离。3.**两个人物**:人物可能代表被测试者本人或其他重要的人物。一个穿裙子的人可能代表女性特质或柔弱的部分，而另一个未穿衣服的人可能反映了个体的原始自我或对自我暴露的恐惧。他们共同注视前方，可能表明个体对未知的焦虑或期待4.**荒凉孤独的场景**:整体画面的氛围可能反映了被测试者的内心感受，即孤独、无助，或者对生活环境的不满。这种情绪状态可能源于过去的负面经历，如家庭问题、社会压力或个人挫折。综合这些元素，被测试者可能有以下特点:经历过创伤或困难，内心感到孤独和无助，防御机制薄弱，可能有一定程度的自我否定或自我价值感低下。他们可能在寻求连接和理解，同时又害怕暴露真实的自我。建议专业心理咨询师进一步探索这些主题，以帮助个体处理潜在的心理问题并建立更健康的应对策略。
				`,
        example_short:"根据手相分析，命主可能在25岁至30岁之间结婚。",
				alignment: 'top',
				sourceType: ['camera'],
				imageStyles: {
					width: 48,
					height: 48,
					border: {
						radius: '20%'
					}
				},
				listStyles: {
					// 是否显示边框
					border: true,
					// 是否显示分隔线
					dividline: true,
					// 线条样式
					borderStyle: {
						width: 1,
						color: 'green',
						style: 'dashed',
						radius: 2
					}
				},
				picInfos:{
					img_id:0,
					file_name:"",//后端给文件的随机命名，用来区分图片
          verified_file_name:"1",//已经验证过通过的文件名
          verify_fail_flag:0,//验证失败的标志
					img_name:"",//用户起的名字
					img_desc:"",//多模态大模型给出的图片详细描述
					sequence:"",//用户的作画顺序
					content:"",//用户对画作的内容的详细描述
					age:"",//用户的年龄
					gender:"",//用户的性别
					job:"",//用户的职业
					// description:"",
					
					time:""
				},
        is_show0:true,
				INITIAL:0,
				IMG_UPLOADED:1,
				WAITING_RES:2,
				RES_SHOWED:3,
				RES_EXPORTING:4,
				failInfo:"请求超时，请重试或联系管理员微信：‘zjq570173331’(请截图保存微信号或下拉页面长按二维码添加),管理员会帮你得到结果",
				failFlag:0,
				screenShotUrl:'',
				tmp_img:"",
        progress:0,
        FILL_INFO:0,
        CONFIRMATION_INFO:1,
        PAY_1:11,
        PAY_2:12,
        PAY_3:13,
        PAY_FINAL0:31,
        SHOW_RESULT:41,
        COLLECT_INFO:61,
        LOADING:91,
        emotion:"正在分析您的感情运，请稍等~~",
        career:"",
        wisdom:"",
        life:"正在分析您的生命线，请稍等~~",
        answers:[
            "正在分析，请稍等~~",
            "正在分析，请稍等~~",
            "正在分析，请稍等~~",
            "正在分析，请稍等~~",
            "正在分析，请稍等~~",
        ],
        // 完成了的答案数量
        completed_answer_count:0,
        answer1:"正在分析，请稍等~~",
        answer2:"正在分析，请稍等~~",
        answer3:"正在分析，请稍等~~",
        answer4:"正在分析，请稍等~~",
        answer5:"正在分析，请稍等~~",
        loading_tip:"正在分析气色.",
        loading_tips_lib:[
          "正在分析气色.",
          "正在分析气色..",
          "正在分析气色...",
          "正在分析五行.",
          "正在分析五行..",
          "正在分析五行...",
          "正在解析指纹掌纹.",
          "正在解析指纹掌纹..",
          "正在解析指纹掌纹...",
          "正在分析八宫明堂.",
          "正在分析八宫明堂..",
          "正在分析八宫明堂...",
        ],
        result:{
          emotion:"正在分析您的感情运，请稍等~~",
          career:"",
          wisdom:"",
          life:"正在分析您的生命线，请稍等~~",
        },
			}
		},
		onLoad() {
			console.log("load好")
      const { param1, param2 } = this.$route.query;
      // 根据参数做进一步的处理
      console.log(`param1 is ${param1}, param2 is ${param2}`);
		},
		mounted() {
			console.log("加载好");
			
				
		},
		methods: {
      url,
      // 隐藏
      hideBtn() {
        console.log("隐藏")
        // 隐藏
        if (this.is_show0 === true) {

        // this.is_show0 = false
        }

      },
      showBtn() {
        console.log("显示")
        // this.is_show0 = true
      },
      onChange(e) {
        this.timeData = e
      },

      set_gender(gender){
        console.log("设置性别"+gender)
        this.user_info.gender = gender;
      },
      change_privacy_agreement(){
        this.privacy_agreement = 1-this.privacy_agreement;
      },
      change_progress(next_progress){
        this.progress = next_progress;

        //   页面滑动到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 200
        });
      },
      send_result(){
        // 对this.user_info.phone做手机号格式的校验
        if (!this.validatePhoneNumber(this.user_info.phone)) {
          // 提示用户手机号码格式不正确
          console.log('手机号码格式不正确');
          uni.showToast({
            title: '请填写正确的手机号码',
            icon: 'error',
            duration: 2000
          });
          return;
        }

        // 对this.user_info.email做邮箱格式的校验
        if (!this.validateEmail(this.user_info.email)) {
          // 提示用户邮箱格式不正确
          console.log('邮箱格式不正确');
          uni.showToast({
            title: '请填写正确的邮箱',
            icon: 'error',
            duration: 2000
          });
          return;
        }




        this.saveUserInfo();

        this.change_progress(this.SHOW_RESULT);
        uni.showToast({
          title: '发送成功',
          icon: 'success',
          duration: 2000
        });
      },

      validatePhoneNumber(phoneNumber) {
        const reg = /^1[3-9]\d{9}$/;
        if (reg.test(phoneNumber)) {
          return true;
        } else {
          return false;
        }
      },
      validateEmail(email) {
        const reg = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
        if (reg.test(email)) {
            return true;
          } else {
            return false;
         }
      },
      startLoadingAnim(){
        let i = 0;
        var changeTextTask = setInterval(() => {
          this.loading_tip = this.loading_tips_lib[i];
          //检查结果是否全部完成
          if (this.completed_answer_count >= 5){
            clearInterval(changeTextTask);
            console.log("结果全部完成，停止加载动画，跳转到结果界面");
            this.change_progress(this.SHOW_RESULT);

          }


          console.log(this.loading_tip)
          i = (i+1)%this.loading_tips_lib.length;

        }, 1000);




      },
			select_pic(){
				console.log("点了")
				this.$refs.files.onClick;
			},
			test(){
				console.log("test")
				this.$refs.test2.onClick;
			},
			select(e){
				// this.status = INITIAL;
        // 失败标志重置为0，表示在等待结果
        this.picInfos.verify_fail_flag = 0;

        this.tmp_img = e.tempFilePaths[0];
				console.log("这里！！！！！"+this.tmp_img)
				console.log('选择文件：',e)
				console.log("文件"+ e.tempFilePaths[0]);
				// this.result = "请等待一分钟左右,您的图片正在被最顶尖的人工智能体进行详尽地分析!💪(◎൧◎💪 )期间请千万不要退出页面！看到结果后请截图保存，重新进入不会看到之前的结果";
				uni.uploadFile({
							url: server_url + '/only/upload/image', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								// console.log(data.id);
								// console.log(uploadFileRes.data);
								// this.result = data.result;
								this.picInfos.file_name = data.filename
								// console.log(this.status);
								// console.log(this.IMG_UPLOADED);
								this.status = this.IMG_UPLOADED;
								// console.log(this.status);
								// console.log("这里"+this.picInfos.img_id)

                // this.verify_pic();
							},
							fail: () => {
								
								this.result = this.failInfo;
								this.failFlag = 1;
								// uni.showModal({
								// 	title: '提示',
								// 	content: this.failInfo,
								// 	showCancel: false,
								// 	success: function (res) {
								// 		if (res.confirm) {
								// 			console.log('用户点击确定');
								// 		} else if (res.cancel) {
								// 			console.log('用户点击取消');
								// 		}
								// 	}
								// });
							
							}
							
						});
				
			},
      verify_pic(){
        uni.showLoading({
          title: '正在检验图片清晰度',
          mask: true
        });


        uni.request({
          url: server_url + "/verify/img", //仅为示例，并非真实接口地址。
          data: {
            'file_name': this.picInfos.file_name,

          },
          timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
          method:"POST",
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          success: (res) => {
            console.log(res.data);
            uni.hideLoading();

            if (res.data.result === "1") {
              console.log("图片验证通过")
              this.picInfos.verified_file_name = res.data.file_name;



              this.analyse();

              this.change_progress(this.PAY_FINAL0);

            } else {
              this.picInfos.verify_fail_flag = 1;

              this.change_progress(this.FILL_INFO);

              uni.showModal({
                title: '提示',
                content: "图片不够清晰，请重新上传图片，尝试更换角度、距离或光线条件",
                showCancel: false,
                success: function (res) {
                  if (res.confirm) {
                    console.log('用户点击确定');
                  } else if (res.cancel) {
                    console.log('用户点击取消');
                  }
                }
              });
            }



          },
          fail:(res) => {

            this.result = this.failInfo;
            this.failFlag = 1;
            uni.showModal({
              title: '提示',
              content: this.failInfo,
              showCancel: false,
              success: function (res) {
                if (res.confirm) {
                  console.log('用户点击确定');
                } else if (res.cancel) {
                  console.log('用户点击取消');
                }
              }
            });

          }
        });




      },
			
			select_backup(e){
				console.log('选择文件：',e)
				console.log("文件"+ e.tempFiles[0]);
				this.result = "请等待一分钟左右,您的图片正在被顶尖的人工智能体进行详尽地分析!💪(◎൧◎💪 )期间请千万不要退出页面！看到结果后请截图保存，重新进入不会看到之前的结果";
				uni.uploadFile({
							url: server_url + '/upload/image', //仅为示例，非真实的接口地址
							filePath: e.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								// console.log(data.id);
								// console.log(uploadFileRes.data);
								this.result = data.result;
								// console.log("这里"+this.picInfos.img_id)
							},
							fail: (uploadFileRes) => {
								
								this.result = this.failInfo;
								this.failFlag = 1;
								uni.showModal({
									title: '提示',
									content: this.failInfo,
									showCancel: false,
									success: function (res) {
										if (res.confirm) {
											console.log('用户点击确定');
										} else if (res.cancel) {
											console.log('用户点击取消');
										}
									}
								});
							
							}
							
							
							
						});
				
			},
			// 获取上传进度
			progress1(e){
				console.log('上传进度：',e)
			
			},
			onClick(e) {
				uni.showToast({
					title: '列表被点击'
				})
			},
			
			// 上传成功
			success(e){
				console.log('上传成功')
			},
			getPersonAttribute() {
				const text = this.overallResult;
				// const text = this.example;
				// 使用正则表达式匹配"### part 1: 人物属性"和"### part 2:"之间的内容
				const regex = /### part 1: 人物属性([\s\S]*?)### part 2:/;
				const match = text.match(regex);
				
				if (match && match[1]) {
				  // match[1] 包含了匹配的组，即所需的文本
				  const extractedText = match[1].trim();
				  console.log(extractedText);
				  return extractedText;
				} else {
				  console.log("没有找到匹配的内容");
				  return text;
				}
			},
			// 上传失败
			fail(e){
				console.log('上传失败：',e)
			},
			change(e) {
				console.log(e);
				this.current = e.detail.current
			},
			
			uploadImages(){
				this.$refs.files.upload()
			},
			
			submit(ref) {
				console.log(this.baseFormData);
				this.$refs[ref].validate().then(res => {
					console.log('success', res);
					
					uni.showToast({
						title: `校验通过`
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			back(){
				uni.navigateBack();
			},
			appendResult(s){
				this.result += s; 
				this.status = 112;
			},
			
			analyse(){
				
				if (this.picInfos.file_name === "") {
					console.log("未上传图片")
					this.result = "请上传图片并填写信息后再点击此按钮提交";
					return;
				}
				
				
				this.result = "请等待一分钟左右,您的图片正在被顶尖的智能体进行详尽地分析!💪(◎൧◎💪 )期间请千万不要退出页面！看到结果后请截图保存，重新进入不会看到之前的结果";
				this.status = this.WAITING_RES;
			
			
				uni.request({
				    url: server_url + "/analyse/img", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'img_name': this.picInfos.img_name,
						
						'sequence': this.picInfos.sequence,
						'content': this.picInfos.content,
						'age': this.picInfos.age,
						'gender':this.picInfos.gender,
						'job': this.picInfos.job,
						'time': this.picInfos.time,
				    },
					timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.picInfos.img_desc = res.data.result;
						this.status = this.RES_SHOWED;
						this.result = this.picInfos.img_desc;
						// this.analyseImgDescStream();
						this.answerQuestions();
					
				    },
					fail:(res) => {
						
						this.result = this.failInfo;
						this.failFlag = 1;
						uni.showModal({
							title: '提示',
							content: this.failInfo,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				});
				
				
				
				
				
				
			},
      answerQuestions(){

        this.answerOneQuestion(2);
        // this.answerOneQuestion(0);
        // this.answerOneQuestion(1);
        // this.answerOneQuestion(3);
        // this.answerOneQuestion(4);


      },

      answerOneQuestion(question_no){
        uni.request({
          url: server_url + "/answer",
          data: {
            'img_desc':this.picInfos.img_desc,
            'birthday': this.user_info.birthday,
            'gender':this.user_info.gender,
            'question_no': question_no,
			'file_name': this.picInfos.file_name,

          },
          timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
          method:"POST",
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          success: (res) => {
            console.log(res.data);

            this.setAnswer(question_no, res.data);
            this.completed_answer_count += 1;

            if(question_no === 2){
              this.answerOneQuestion(0);
            } else if(question_no === 0){
              this.answerOneQuestion(1);
            } else if(question_no === 1){
              this.answerOneQuestion(3);
            } else if(question_no === 3){
              this.answerOneQuestion(4);
            } else if(question_no === 4){

            }

          },
          fail:(res) => {
            this.answerOneQuestion(question_no);




          }
        });



      },

      showFailInfo(){

        this.result = this.failInfo;
        this.failFlag = 1;
        uni.showModal({
          title: '提示',
          content: this.failInfo,
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
      setAnswer(question_no, answer){
        switch (question_no) {
          case 0:
            this.answer1 = answer;
            break;
          case 1:
            this.answer2 = answer;
            break;
          case 2:
            this.answer3 = answer;
            break;
          case 3:
            this.answer4 = answer;
            break;
          case 4:
            this.answer5 = answer;
            break;
          default:
            break;
        }
      },

			analyseImgDesc(){
				
				
				uni.request({
				    url: server_url + "/analyse/img_desc", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'img_name': this.picInfos.img_name,
						'img_desc':this.picInfos.img_desc,
						'sequence': this.picInfos.sequence,
						'content': this.picInfos.content,
						'age': this.picInfos.age,
						'gender':this.picInfos.gender,
						'job': this.picInfos.job,
						'time': this.picInfos.time,
				    },
					timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.result = res.data.result;
						this.status = this.RES_SHOWED;
						
						this.conclude();
				    },
					fail:(res) => {
						
						this.result = this.failInfo;
						this.failFlag = 1;
						uni.showModal({
							title: '提示',
							content: this.failInfo,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				});
				
				
				
			},
			analyseImgDescStream(){
				
				
				fetch(server_url + '/analyse/img_desc/stream', {
				  method: 'POST',
				  headers: {
				    'Content-Type': 'application/json'
				  },
				  body: JSON.stringify({
				    'file_name': this.picInfos.file_name,
				    'img_name': this.picInfos.img_name,
				    'img_desc':this.picInfos.img_desc,
				    'sequence': this.picInfos.sequence,
				    'content': this.picInfos.content,
				    'age': this.picInfos.age,
				    'gender':this.picInfos.gender,
				    'job': this.picInfos.job,
				    'time': this.picInfos.time,
				  }),
				  signal: AbortSignal.timeout(600000) // 可以设置超时
				})
				.then(response => {
				  if (!response.ok) {
				    throw new Error('Network response was not ok');
				  }
				  return response.body.getReader();
				})
				.then(reader => {
				  const streamToString = async (reader) => {
				    let stream = '';
				    while (true) {
				      const { done, value } = await reader.read();
				      if (done) break;
				      stream += new TextDecoder().decode(value);
					  this.result = stream;
				      // console.log(stream); // 或者更新到你的前端UI
				    }
				    return stream;
				  };
				  
				  return streamToString(reader);
				})
				.then(data => {
				  // 处理完整的数据
				  this.concludeStream();
				})
				.catch(error => {
				  console.error('Error fetching stream:', error);
				});
				
				
			},
			conclude() {
				uni.request({
				    url: server_url + "/conclude", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'content': this.result,
				    },
					timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        console.log(res.data);
				        this.overallResult = res.data.result;
					
				    },
					fail:(res) => {
						
						this.result = this.failInfo;
						this.failFlag = 1;
						uni.showModal({
							title: '提示',
							content: this.failInfo,
							showCancel: false,
							success: function (res) {
								if (res.confirm) {
									console.log('用户点击确定');
								} else if (res.cancel) {
									console.log('用户点击取消');
								}
							}
						});

					}
				});
			},
      // 回到填写信息的页面重新编辑信息
      fillInfo(){
        this.progress = this.FILL_INFO;
        //   页面滑动到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 200
        });
      },
      // 提交信息
      submitInfo(){

        // 修改home-page-container的背景图片
        // this.$refs.homepage.style.color="green";
        // this.$refs.homepage.style.backgroundImage = "url('@/static/main_button.svg')";

        if (this.privacy_agreement === 0) {
          uni.showToast({
            title: '请勾选页面底部的协议',
            icon: 'error'
          })
          return
        }

        if (this.tmp_img === "") {
          uni.showToast({
            title: '请上传您的掌纹图片',
            icon: 'error'
          })
          return
        }

        if (this.user_info.birthday === this.getDate(new Date())) {
          uni.showToast({
            title: '请设置您的生日',
            icon: 'error'
          })
          return
        }

/*
        if (this.picInfos.file_name !== this.picInfos.verified_file_name) {
        //   图片没有验证通过

          if (this.picInfos.verify_fail_flag === 1) {
            // 表示验证失败
            uni.showToast({
              title: '图片验证失败，请重新上传清晰的掌纹图片',
              icon: 'error'
            })
            return
          } else {
          //   图片还在验证中
            uni.showToast({
              title: '图片审核中，预计需要需要5秒左右',
              icon: 'error'
            })
            return

          }


        }*/




        this.progress = this.CONFIRMATION_INFO;
      //   页面滑动到顶部
        uni.pageScrollTo({
          scrollTop: 0,
          duration: 200
        });
      },
      confirmInfo(){

        this.verify_pic();


      },
      pay(){
        //微信支付

        if (this.completed_answer_count < 5) {
          this.change_progress(this.LOADING);
          this.startLoadingAnim();
        } else {
          this.change_progress(this.SHOW_RESULT);
        }

      },
      openModal() {
        uni.showModal({
          title: '提示',
          content: this.failInfo,
          showCancel: false,
          success: function (res) {
            if (res.confirm) {
              console.log('用户点击确定');
            } else if (res.cancel) {
              console.log('用户点击取消');
            }
          }
        });
      },
			concludeStream(){
				
				fetch(server_url + '/conclude/stream', {
				  method: 'POST',
				  headers: {
				    'Content-Type': 'application/json'
				  },
				  body: JSON.stringify({
				    'file_name': this.picInfos.file_name,
				    'content': this.result,
				  }),
				  signal: AbortSignal.timeout(600000) // 可以设置超时
				})
				.then(response => {
				  if (!response.ok) {
				    throw new Error('Network response was not ok');
				  }
				  return response.body.getReader();
				})
				.then(reader => {
				  const streamToString = async (reader) => {
				    let stream = '';
				    while (true) {
				      const { done, value } = await reader.read();
				      if (done) break;
				      stream += new TextDecoder().decode(value);
					  this.overallResult = stream;
				      // console.log(stream); // 或者更新到你的前端UI
				    }
				    return stream;
				  };
				  
				  return streamToString(reader);
				})
				.then(data => {
				  // 处理完整的数据
				  this.status = this.RES_EXPORTING;
				  this.saveTotalInfo();
				})
				.catch(error => {
				  console.error('Error fetching stream:', error);
				});
				
				
			},
      saveUserInfo(){
        uni.request({
          url: server_url + "/user_info", //仅为示例，并非真实接口地址。
          data: {
            'birthday': this.user_info.birthday,
            'gender': this.user_info.gender,
            'phone': this.user_info.phone,
            'email': this.user_info.email,
            'file_name': this.picInfos.file_name,
          },
          method:"POST",
          header: {
            'Content-Type': 'application/json' //自定义请求头信息
          },
          success: (res) => {
            console.log(res.data);
          },
          fail:(res) => {
            console.log("保存用户信息失败")
          }
        });
      },
			saveTotalInfo(){
				
				
				uni.request({
				    url: server_url + "/total", //仅为示例，并非真实接口地址。
				    data: {
				        'file_name': this.picInfos.file_name,
						'img_name': this.picInfos.img_name,
						'img_desc':this.picInfos.img_desc,
						'sequence': this.picInfos.sequence,
						'content': this.picInfos.content,
						'age': this.picInfos.age,
						'gender':this.picInfos.gender,
						'job': this.picInfos.job,
						'time': this.picInfos.time,
						'img_analyse': this.result,
						'personality_card': this.overallResult,
				    },
					// timeout: 300000, // 设置超时时间，单位为毫秒，这里设置为300秒
					method:"POST",
				    header: {
				         'Content-Type': 'application/json' //自定义请求头信息
				    },
				    success: (res) => {
				        
				    },
					fail:(res) => {
						
						
				
					}
				});
				
				
				
			},
			renderOver(e) {
			  // e为导出截图的base64格式文件
			  console.log('==== renderOver :', e)
			  this.screenShotUrl = e;
			  this.previewImg(this.screenShotUrl)
			},
			cusRenderDom() {
			  // 调用组件实例中h2cRenderDom方法
			  this.$refs.renderRef.h2cRenderDom()
			},
			//预览生成的海报图片
			previewImg(url) {
			    if (!url) return
				
			    uni.previewImage({
			        urls: [url]
			    })
			},
			
			stream(){
				
				
				
				fetch(server_url + '/stream', {
				  method: 'GET',
				  headers: {
				    'Content-Type': 'application/json'
				  },
				  // body: JSON.stringify({
				  //   // 你的请求体
				  // }),
				  signal: AbortSignal.timeout(600000) // 可以设置超时
				})
				.then(response => {
				  if (!response.ok) {
				    throw new Error('Network response was not ok');
				  }
				  return response.body.getReader();
				})
				.then(reader => {
				  const streamToString = async (reader) => {
				    let stream = '';
				    while (true) {
				      const { done, value } = await reader.read();
				      if (done) break;
				      stream += new TextDecoder().decode(value);
					  this.overallResult = stream;
				      // console.log(stream); // 或者更新到你的前端UI
				    }
				    return stream;
				  };
				  
				  return streamToString(reader);
				})
				.then(data => {
				  // 处理完整的数据
				  console.log("完整的！"+data);
				})
				.catch(error => {
				  console.error('Error fetching stream:', error);
				});
				
				
				
				
			},
      getDate(date){
        date = new Date(date)
        const year = date.getFullYear()
        const month = date.getMonth()+1
        const day = date.getDate()
        return `${year}-${this.addZero(month)}-${this.addZero(day)}`
      },
      addZero(num) {
        if (num < 10) {
          num = `0${num}`
        }
        return num
      },
			
			complete(){
				this.updatePicInfo();
				this.back();
			}
		}
	}
</script>

<style lang="scss">


.page-cont {
  //width: 100%;
  //height: 10000px;
  //background-image: url('@/static/home-page-background.png'), linear-gradient(to top, black, black);
  ////background-size: cover;
  //background-size: 100% auto;
  //background-position: center top;
  //background-repeat: no-repeat;
}

.home-page-container {
  width: 100%;
  height: 100%;
  background-image: url('@/static/home-page-background.png'), linear-gradient(to top, black, black);
  //background-size: cover;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;
}

.blur-text{
  //增加模糊效果
  filter: blur(5px);
}

.price-text {
  /* 9.9 */

  //position: absolute;
  width: 76px;
  height: 72px;
  //left: calc(50% - 76px/2 - 59.5px);
  //top: 718px;

  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 58px;
  line-height: 150%;
  /* identical to box height, or 72px */
  display: flex;
  align-items: center;

  //background: linear-gradient(180deg, #FFF7E3 0%, #F0D397 100%);
  //-webkit-background-clip: text;
  //-webkit-text-fill-color: transparent;
  //background-clip: text;
  //text-fill-color: transparent;

  //border: 2px solid #130C10;
  //text-shadow: 0px 0px 10px rgba(175, 145, 108, 0.4);
  color: #F0D397;
  text-shadow:
      1px 1px 7px #000,
      2px 2px 7px #000,
      3px 3px 7px #000;

}

.red-box{
  //position: absolute;
  color: white;
  font-weight: bold;
  text-align: center;
  //文字垂直居中
  display: flex;
  justify-content: center;
  align-items: center;

  //width: 100%;
  //height: 100%;
  //background: linear-gradient(180deg, #20181F 0%, #735244 100%);
  //border: 3px solid #8c5e4f;
  //border-radius: 25px;


  /* Rectangle 324 */


  width: 55px;
  height: 24px;


  background: #B73331;
  border-radius: 5px;


}

.bottom-window{
  position: fixed;
  bottom: 0px;

  .normal-text{
    /* 红包优惠20元 */


    //width: 70px;
    //height: 13px;


    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 28rpx;
    line-height: 13px;
    text-align: center;

    color: #FFFFFF;


  }

}

.result-page-container {
  width: 100%;
  height: 100%;
  background-image: url('@/static/result-page-background.png'), linear-gradient(to top, black, black);
  //background-size: cover;
  background-size: 100% auto;
  background-position: center top;
  background-repeat: no-repeat;

  .content-window {
    margin-top: 550rpx;
    margin-left: 5%;
    justify-content: center;
    align-items: center;
    left: 10%;
    width: 90%;
    //height: 1150rpx;

    border: 3px solid #8c5e4f;
    border-radius: 25px;
    //text-align: center;
    /* Rectangle 289 */
    background: linear-gradient(180deg, #20181F 0%, #735244 100%);

    .result-item-container {
      border: 3px solid #8c5e4f;
      border-radius: 30rpx;
      width: 80%;
      overflow: auto;
      //height: 1000222px;
      background-color: #20181F;
      margin-top: 25rpx;
      //text-align: center;
      //align-content: center;
      //align-items: center;
    }

    .result-title {
      margin-top: 50rpx;
      margin-bottom: 0rpx;
      color: #F6E1B4;

      font-size: 70rpx;
      font-weight: bold;
    }

    .question-title{
      margin-top: 50rpx;
      margin-bottom: 0rpx;
      color: #F6E1B4;
      font-size: 40rpx;
      font-weight: bold;
    }

    .result-text {

      margin-left: 20rpx;
      margin-top: 15rpx;
      margin-bottom: 15rpx;
      text-align: left;
      font-family: 'Inter';
      font-style: normal;
      font-weight: 400;
      font-size: 15px;
      line-height: 22px;
      /* or 147% */

      color: #F5DEAD;

    }

  }
}

.loading-page-container {
  height: 100vh;
  //width: 100%;
  //object-fit: cover;
  //width: 100%;
  //height: 100%;
  background-image: url('@/static/loading-background.png');
  //background-size: cover;
  background-size: auto 100%;
  background-position: center top;
  background-repeat: no-repeat;
  background-color: #000;


}

.bottom-content{
  position: fixed;
  bottom: 10%;
}


.info-window {
  //display: flex;
  //justify-content: center;
  //align-items: center;
  //position: fixed;
  ////bottom: 0;
  //left: 10%;
  ////transform: translateX(-50%);
  //width: 80%; /* 调整为你需要的宽度 */
  ////height: 50px; /* 调整为你需要的高度 */
  //background-color: white; /* 调整为你需要的背景颜色 */
  //border: 2px solid brown; /* 调整为你需要的边框颜色和宽度 */
  //border-radius: 25px; /* 一般来说，圆角的半径应该是高度的一半以获得完全的圆角效果 */
  //text-align: center;
  margin-top: 115%;
  margin-left: 5%;
  justify-content: center;
  align-items: center;
  left: 10%;
  width: 90%;
  height: 1150rpx;

  border: 3px solid #8c5e4f;
  border-radius: 25px;
  //text-align: center;


  /* Rectangle 289 */



  background: linear-gradient(180deg, #20181F 0%, #735244 100%);



}

.confirmation-window{
  justify-content: center;
  align-items: center;
  position: relative;
  //left: 10%;
  //width: 10%;
  //height: 1150rpx;

  border: 3px solid #8c5e4f;

  //边框只在上部有圆化，下部没有
  border-top-left-radius: 25px;
  border-top-right-radius: 25px;
  //border-radius: 25px;

  //text-align: center;


  /* Rectangle 289 */



  background: linear-gradient(180deg, #20181F 0%, #735244 100%);

  .showed-image-container{

    width: 80%;

    image{
      border-radius: 20%;
      /* Group 13988 */
      //边框有线条
      border: 3px solid #A27658;
      //height: 100%;
      //width: 100%;
      //max-width: 170px;
      //max-height: 220px;


    }
  }

  .image-container{

    border-radius: 10%;
    /* Group 13988 */
    //边框有线条
    border: 3px solid #A27658;

    width: 46vw;
    height: 31vh;

    //background-color: #0A98D5;
    //background-image: 'url('+ "http://43.136.77.140/pics/example_big.jpg" +')';
    //background-image: url("{{this.tmp_img}}");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }



  .close-btn-container {
    /* Group 13981 */

    position: absolute;

    //left: calc(50% - 36px/2 + 155.5px);
    top: 50rpx;
    right: 30rpx;

    image{
      width: 36px;
      height: 36px;
    }

  }
}

	.example-body {
		padding: 10px;
		padding-top: 0;
	}
	.operation-container{
		// margin-top: -90rpx;
		// border-radius: 5000rpx;
		// z-index: -200;
	}
	.product-title{
		//margin-left: 40rpx;

    margin-top: 50rpx;
    margin-bottom: 40rpx;
    color: #F6E1B4;

		font-size: 70rpx;
		font-weight: bold;
		// line-height: 52rpx;
	}

  .product-tip {
    color: #F6E1B4;
    //font-size: 30rpx;
    //font-weight: bold;
    // line-height: 52rpx;
  }

  .main-button-container{

    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
  }
  .main-button-text {
    /* 立即查看 */

    position: absolute;
    //width: 60px;
    //height: 23px;
    margin-bottom: 25rpx;
    //left: calc(50% - 60px/2 + 0.5px);
    //top: 796px;

    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-size: 40rpx;
    //line-height: 150%;
    /* identical to box height, or 22px */

    color: #FFFFFF;
    text-shadow:
        1px 1px 0px #000,
        2px 2px 0px #000,
        3px 3px 0px #000;
    //border: 1px solid #453B2E;

  }

  .form-item-container{
    border: 3px solid #8c5e4f;
    border-radius: 30rpx;
    width: 80%;
    overflow: auto;
    //height: 1000222px;
    background-color: #20181F;
    margin-top: 25rpx;
    text-align: center;
    align-content: center;
    align-items: center;
  }

  .form-item-title {

    // line-height: 52rpx;

    margin-left: 40rpx;
  }

  .form-item-text {
   

    /* 你的生日 */

    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-size: 17px;
    line-height: 18px;
    text-align: center;
    //margin-top: -100rpx;
    color: #F5DEAD;


  }

  .time_item_container{
    border: 2px solid #F5DEAD;
    margin-right: 2px;
    border-radius: 20rpx;
  }

  .time_item{
    //font-family: 'Inter',serif;
    //font-style: normal;
    //font-weight: 700;
    //font-size: 34px;
    //line-height: 18px;
    //text-align: center;
    //background-color: #0A98D5;
    //margin: 20rpx;
    ////margin-top: -100rpx;
    //color: #F5DEAD;

    background-color: #F5DEAD;
    border-radius: 20rpx;
    border: 2px solid black;
    //margin-right: 2px;
    text{
      margin-right: 20rpx;
      margin-left: 20rpx;
    }
  }

.time_item_text{
  color: #FFFFFF;
  font-size: 34px;
  font-weight: 700;

  //text-shadow:
  //    1px 1px 0px #000,
  //    2px 2px 0px #000,
  //    3px 3px 0px #000;
  -webkit-text-stroke: 2px #000;
  margin-right: 2rpx;
  margin-left: 2rpx;

}

  .plain-text{
    color: white;
    font-size: 24rpx;
    text-align: center;
  //  细一些
    font-weight: 30;
  }

.plain-text-regular{
  color: white;
  font-size: 30rpx;
  text-align: center;
  //  细一些
  font-weight: 400;
}

  .radio-option-button {
      margin-right: 15rpx;
      margin-left: 30rpx;
    width: 40rpx;
    height: 40rpx;
  }

  .radio-button-icon{
    width: 40rpx;
    height: 40rpx;
  }

  .form-item-icon {
    /* Group 13982 */
    margin-left: 20rpx;
    //margin-top: 10rpx;
    width: 40rpx;
    height: 40rpx;

  }

	.custom-image-box {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}

	.content {
		padding: 15px;
	}
	
	.text2 {
		font-size: 14px;
		color: #666;
		line-height: 20px;
	}

	.text {
		font-size: 14px;
		color: #333;
	}
	
	.screen-shot-btn {
		background-color: #63065f;
	}
	
	.info-text {
		color: white;
		font-size: 600;
		font-weight: 700;
	}
	
	// 轮播图

</style>
